<template>
    <div class="mr-root">
        <div class="reply-content">
            <div class="reply-top">
                <img :src="l.author.avatar_url" alt="">
                <span class="reply-name">{{l.author.loginname}}</span>
            </div>
            <div class="div" v-html="l.content"></div>
            <div class="good">
                <span class="reply-time"></span>
                <i class="icon-thumbs-up-alt" v-if="show" @click="up" v-model="replayId"></i>
                <i class="icon-thumbs-up" v-if="!show" @click="up"></i>
                <span class="reply-up">{{l.ups.length}}</span>
                <router-link :to="'/mycomment/'+list.id+'/'+l.id">
                    <span class="replay">我要评论</span>
                </router-link>  
            </div>
        </div>
    </div>
</template>

<script>
    export default{
        props:['l','list'],
        data(){
            return{
                show:true,
                replayId:this.l.id
            }
        },
        methods:{
            up(){

            },
            change(){
                if(this.l.ups.length>0){
                    isActive=true,
                    Active=false
                }else{
                    isActive=false,
                    Active=true
                }
            },
            up(){
                var replayId=this.replayId
                var accesstoken=localStorage.getItem('accesstoken')
                this.axios.post('/vueapi/v1/reply/'+replayId+'/ups','accesstoken='+accesstoken)
                .then(data=>{
                    //console.log(data.data.action)//up或down
                    if(data.data.action=='up'){
                        this.show=false
                    }else if(data.data.action=='down'){
                        this.show=true
                    }
                })
                
                
            }
        }
    }
</script>

<style scoped>
    .reply-content{
        margin-top: 5px;
        padding: 15px;
        box-shadow: 0 1px 10px rbga(0,0,0,.2);
    }
    img{
        width: 50px;
        height: 50px;
        border-radius: 50%;
        margin-right: 10px;
    }
    .reply-name,.reply-time{
        font-size: 15px;
        position: relative;
        top: -20px;
    }
    .good{
        margin-top: 10px;
        font-size: 15px;
    }
    .icon-thumbs-up-alt,.icon-thumbs-up{
        color: #0e77e4;
    }
    .reply-up{
        color: #999;
    }
    .replay{
        border: 1px solid #0e77e4;
        color: #0e77e4;
        border-radius: 5px;
        font-size: 12px;
        padding: 2px 8px;
        margin-left: 30px;
    }
    option{
        outline: none;
    }
</style>